<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>统计信息</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/statistical.css">
    <link rel="stylesheet" href="./static/css/charts.css">
    <link rel="stylesheet" href="./static/css/chartist/chartist.min.css">
</head>
<body>
    <div id="statistical" class="statistical-box common-box">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">胡奥，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>统计分析</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>
            <div class="big-box">
                <!-- 综合统计 -->
                <div class="number-box">
                    <div class="one">
                        <div class="title">
                            进园人数
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            11,325
                        </div>
                        <div class="tips">
                            截止当前进园人数汇总
                        </div>
                    </div>
                    <div class="one">
                        <div class="title">
                            讲解批次
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            56
                        </div>
                        <div class="tips">
                            截止当前讲解批次汇总
                        </div>
                    </div>
                    <div class="one">
                        <div class="title">
                            讲解服务人数
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            865
                        </div>
                        <div class="tips">
                            截止当前讲解服务游客人数汇总
                        </div>
                    </div>
                    <div class="one">
                        <div class="title">
                            停车总数
                            <div class="tag">今日</div>
                        </div>
                        <div class="number">
                            1,021
                        </div>
                        <div class="tips">
                            截止当前停车数汇总
                        </div>
                    </div>
                </div>
                <!-- 票务统计 -->
                <div class="charts-box row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>票务统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="type === 1 ? 'active' : ''" @click="ticketInit(1)">天</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="type === 2 ? 'active' : ''" @click="ticketInit(2)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="type === 3 ? 'active' : ''" @click="ticketInit(2)">年</button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="flot-chart">
                                            <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <ul class="stat-list">
                                            <li>
                                                <h2 class="no-margins">520</h2>
                                                <small>今日激活数</small>
                                                <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i></div>
                                                <div class="progress progress-mini">
                                                    <div style="width: 48%;" class="progress-bar"></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2 class="no-margins ">1,422</h2>
                                                <small>本月激活数</small>
                                                <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i></div>
                                                <div class="progress progress-mini">
                                                    <div style="width: 60%;" class="progress-bar"></div>
                                                </div>
                                            </li>
                                            <li>
                                                <h2 class="no-margins ">9,180</h2>
                                                <small>当年激活数</small>
                                                <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i></div>
                                                <div class="progress progress-mini">
                                                    <div style="width: 22%;" class="progress-bar"></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 讲解员统计 -->
                <div class="charts-box row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>讲解员统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" :class="type === 1 ? 'active' : ''" @click="ticketInit(1)">天</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="type === 2 ? 'active' : ''" @click="ticketInit(2)">月</button>
                                        <button type="button" class="btn btn-xs btn-white" :class="type === 3 ? 'active' : ''" @click="ticketInit(2)">年</button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="flot-chart">
                                            <small>讲解批次</small>
                                            <div class="flot-chart-content" id="ct-chart3"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <small>讲解批次占比</small>
                                        <div class="row">
                                            <div class="col-lg-5">
                                                <div class="flot-chart-content" id="ct-chart5"></div>
                                            </div>
                                            <div class="col-lg-5">
                                                <ul class="star-list">
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop nm_color"></i>
                                                        南门：20%，35
                                                    </li>
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop bm_color"></i>
                                                        北门：20%，35
                                                    </li>
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop dm_color"></i>
                                                        东门：20%，35
                                                    </li>
                                                    <li>
                                                        <i class="glyphicon glyphicon-stop zm_color"></i>
                                                        正门：20%，35
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="charts-box row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>停车统计</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" >北门</button>
                                        <button type="button" class="btn btn-xs btn-white" >南门</button>
                                        <button type="button" class="btn btn-xs btn-white" >综合</button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-lg-9">
                                        <div class="flot-chart">
                                            <small>实时停车数量</small>
                                            <canvas class="flot-chart-content" id="ct-chart6" height="200px"></canvas>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <small>停车数占比</small>
                                        <canvas class="flot-chart-content" id="ct-chart7" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 志愿者统计 -->
                <div class="charts-box row">
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>志愿者统计</h5>
                                    <div class="pull-right">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-xs btn-white" >月</button>
                                            <button type="button" class="btn btn-xs btn-white" >年</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="flot-chart">
                                                <small>志愿者人数</small>
                                                <div class="flot-chart-content" id="flot-chart8"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="flot-chart">
                                                <small>活动次数</small>
                                                <div class="flot-chart-content" id="flot-chart9"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <!-- Flot -->
    <script src="./static/js/plugins/flot/jquery.flot.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.time.js"></script>

    <!-- Jvectormap -->
    <script src="./static/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="./static/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

    <script src="./static/js/jquery.easypiechart.js"></script>
    <script src="./static/js/plugins/chartist/chartist.min.js"></script>
    <!-- <script src="./static/js/plugins/chartJs/Chart.min.js"></script> -->
    <!-- <script src="//s.nodejs.cn/chart/assets/Chart.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime();
        }

        function gm(year, month) {
            return new Date(year, month - 1).getTime();
        }

        function gy(year) {
            return new Date(year).getTime();
        }
        var statistical = new Vue({
            el: '#statistical',
            data() {
                return {
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    data1: [],
                    data2: [],
                    type: 1,
                    xaxis: {
                        mode: "time",
                        tickSize: [3, "day"],
                        tickLength: 0,
                        axisLabel: "Date",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: 'Arial',
                        axisLabelPadding: 10,
                        color: "#d5d5d5"
                    },
                    dataset: [
                        {
                            label: "核销数",
                            data: [],
                            color: "#1ab394",
                            bars: {
                                show: true,
                                align: "center",
                                barWidth: 24 * 60 * 60 * 600,
                                lineWidth: 0
                            }

                        }, {
                            label: "激活数",
                            data: [],
                            yaxis: 2,
                            color: "#1C84C6",
                            lines: {
                                lineWidth:1,
                                    show: true,
                                    fill: true,
                                fillColor: {
                                    colors: [{
                                        opacity: 0.2
                                    }, {
                                        opacity: 0.4
                                    }]
                                }
                            },
                            splines: {
                                show: false,
                                tension: 0.6,
                                lineWidth: 1,
                                fill: 0.1
                            },
                        }
                    ],
                }
            },
            created() {

            },
            mounted() {
                this.getDate();
                this.ticketInit(1);
            },
            methods: {
                //时间格式化
                timeFormat(fmt) {
                    let date = new Date();
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    window.location.href = '/login.html'
                },

                //票务统计
                ticketInit(type) {
                    var _vm = this;
                    _vm.type = type;
                    $(document).ready(function() {
                        // -------------------------票务统计--------------------------
                        //激活数 数据
                        var data2 = [
                            [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
                            [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
                            [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
                            [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
                            [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
                            [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
                            [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
                            [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 20]
                        ];
                        console.log(data2)
                        var data4 = [
                            [gm(2012, 1), 7],[gm(2012, 2), 10],[gm(2012, 3), 20],[gm(2012, 4), 15],[gm(2012, 5), 17],
                            [gm(2012, 6), 18],[gm(2012, 7), 11],[gm(2012, 8), 20],[gm(2012, 9), 21],[gm(2012, 10), 25],
                            [gm(2012, 11), 5],[gm(2012, 12), 7],
                        ];
                        //核销数  数据
                        var data3 = [
                            [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
                            [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
                            [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
                            [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
                            [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
                            [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
                            [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
                            [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
                        ];

                        var data5 = [
                            [gm(2012, 1), 200],[gm(2012, 2), 300],[gm(2012, 3), 320],[gm(2012, 4), 400],[gm(2012, 5), 370],
                            [gm(2012, 6), 450],[gm(2012, 7), 480],[gm(2012, 8), 500],[gm(2012, 9), 520],[gm(2012, 10), 540],
                            [gm(2012, 11), 600],[gm(2012, 12), 700],
                        ]

                        // _vm.data1 = data3;
                        // _vm.data2 = data2;
                        var dataset = _vm.dataset;
                        if(type === 1) {
                            dataset[0].data = data3;
                            dataset[1].data = data2
                            dataset[0].bars.lineWidth = 1;
                            dataset[0].bars.barWidth = 24 * 60 * 60 * 600;
                            _vm.xaxis.tickSize = [3, 'day'];
                        }else if(type === 2) {
                            dataset[0].data = data5;
                            dataset[1].data = data4;
                            dataset[0].bars.lineWidth = 1;
                            dataset[0].bars.barWidth = 24 * 60 * 60 * 6000;
                            _vm.xaxis.tickSize = [1, 'month'];
                        }

                        var options = {
                            xaxis: _vm.xaxis,
                            yaxes: [
                                {
                                    position: "left",
                                    max: 1070,
                                    color: "#d5d5d5",
                                    axisLabelUseCanvas: true,
                                    axisLabelFontSizePixels: 12,
                                    axisLabelFontFamily: 'Arial',
                                    axisLabelPadding: 3
                                }, {
                                    position: "right",
                                    clolor: "#d5d5d5",
                                    axisLabelUseCanvas: true,
                                    axisLabelFontSizePixels: 12,
                                    axisLabelFontFamily: ' Arial',
                                    axisLabelPadding: 67
                                }
                            ],
                            legend: {
                                noColumns: 1,
                                labelBoxBorderColor: "#000000",
                                position: "nw"
                            },
                            grid: {
                                hoverable: false,
                                borderWidth: 0
                            }
                        };

                        var previousPoint = null, previousLabel = null;

                        $.plot($("#flot-dashboard-chart"), dataset, options);

                        //-----------------------------讲解员统计-----------------------------------
                        //讲解批次条形图
                        let label = [];
                        for (let index = 1; index < 31; index++) {
                            if(index % 3 === 0) {
                                if(index < 10) {
                                    label.push('Jan 0' + index)
                                }else {
                                    label.push('Jan ' + index)
                                }
                                
                            }else {
                                label.push(' ')
                            }
                        }
                        console.log(label)
                        new Chartist.Bar('#ct-chart3', {
                            labels: label,
                            series: [
                                [5, 12, 14, 13,8, 12, 14, 13,8, 12, 14, 13,8, 12, 14, 13,8, 12, 14, 13,8, 12, 14, 13,8, 12, 14, 13,20,18],
                                [5, 4, 5, 3,5, 4, 5, 3, 10,5, 4, 5, 3, 10,5, 4, 5, 3, 10,5, 4, 5, 3, 10,5, 4, 5, 3, 10,5],
                                [5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,4,2],
                                [5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,5, 2, 4, 6,4,2]
                            ]
                        }, {
                            stackBars: true,
                            axisY: {
                                labelInterpolationFnc: function(value) {
                                    return (value);
                                }
                            }
                        }).on('draw', function(data) {
                            if(data.type === 'bar') {
                                data.element.attr({
                                    style: 'stroke-width: 10px'
                                });
                            }
                        });

                        //讲解批次占比 饼图
                        var data = {
                            series: [5, 3, 4, 6]
                        };

                        var sum = function(a, b) { return a + b };

                        new Chartist.Pie('#ct-chart5', data, {
                            labelInterpolationFnc: function(value) {
                                return Math.round(value / data.series.reduce(sum) * 100) + '%';
                            }
                        });

                        //----------------------------停车统计--------------------------------
                        //实时停车数量曲线图
                        var lineData = {
                            labels: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
                            datasets: [
                                {
                                    label: "停车数",
                                    backgroundColor: 'rgba(26,179,148,0.5)',
                                    borderColor: "rgba(26,179,148,0.7)",
                                    pointBackgroundColor: "rgba(26,179,148,1)",
                                    pointBorderColor: "#fff",
                                    data: [28, 48, 40, 19, 86, 27, 90]
                                },{
                                    label: "空位数",
                                    backgroundColor: 'rgba(220, 220, 220, 0.5)',
                                    pointBorderColor: "#fff",
                                    data: [65, 59, 80, 81, 56, 55, 40]
                                }
                            ]
                        };


                        var ctx = document.getElementById("ct-chart6").getContext("2d");
                        new Chart(ctx, {type: 'line', data: lineData});                                                  
                        // new Chart(ctx).Line(lineData, lineOptions);

                        //停车数占比环形图
                        var doughnutData = {
                            labels: ["南门","北门","剩余" ],
                            datasets: [{
                                data: [300,50,100],
                                backgroundColor: ["rgb(26,179,148)","#79D2C0","rgb(220, 220, 220)"]
                            }]
                        } ;


                        var doughnutOptions = {
                            responsive: true
                        };


                        var ctx4 = document.getElementById("ct-chart7").getContext("2d");
                        new Chart(ctx4, {type: 'doughnut', data: doughnutData, options:doughnutOptions});

                        //-------------------------志愿者统计---------------------------------
                        //条形图
                        var barOptions = {
                            series: {
                                bars: {
                                    show: true,
                                    align: 'center',
                                    barWidth: 0.4,
                                    fill: true,
                                    fillColor: {
                                        colors: [{
                                            opacity: 0.8
                                        }, {
                                            opacity: 0.8
                                        }]
                                    }
                                }
                            },
                            xaxis: {
                                tickDecimals: 0,
                                ticks: [
                                    [1,"1月"],
                                    [2,"2月"],
                                    [3,"3月"],
                                    [4,"4月"],
                                    [5,"5月"],
                                    [6,"6月"]
                                ],
                                autoscaleMargin: 0.01,
                            },
                            colors: ["#1ab394"],
                            grid: {
                                color: "#999999",
                                hoverable: false,
                                clickable: false,
                                tickColor: "#D4D4D4",
                                borderWidth:0,
                                // show: false,
                                labelMargin: 10,
                                aboveData: false
                            },
                            legend: {
                                show: false
                            },
                            tooltip: true,
                            tooltipOpts: {
                                content: "%x月: %y"
                            }
                        };
                        var barData = {
                            label: "bar",
                            data: [
                                [1, 34],
                                [2, 25],
                                [3, 19],
                                [4, 34],
                                [5, 32],
                                [6, 44]
                            ]
                        };

                        $.plot($("#flot-chart8"), [barData], barOptions);

                        //折线图
                        var barOptions = {
                            series: {
                                lines: {
                                    show: true,
                                    lineWidth: 2,
                                    fill: true,
                                    fillColor: {
                                        colors: [{
                                            opacity: 0.0
                                        }, {
                                            opacity: 0.0
                                        }]
                                    }
                                }
                            },
                            xaxis: {
                                tickDecimals: 0
                            },
                            colors: ["#1ab394"],
                            grid: {
                                color: "#999999",
                                hoverable: true,
                                clickable: true,
                                tickColor: "#D4D4D4",
                                borderWidth:0
                            },
                            legend: {
                                show: false
                            },
                            tooltip: true,
                            tooltipOpts: {
                                content: "x: %x, y: %y"
                            }
                        };
                        var barData = {
                            label: "bar",
                            data: [
                                [1, 34],
                                [2, 25],
                                [3, 19],
                                [4, 34],
                                [5, 32],
                                [6, 44]
                            ]
                        };
                        $.plot($("#flot-chart9"), [barData], barOptions);
                    });
                }
            }
        })
    </script>
</body>
</html>